<template>
  <div>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :categorys="categorys"
      style="height: 100vh;"
    />
    <el-button class="saveBtn" type="primary" @click="save">保存模板</el-button>
  </div>
</template>

<script>
import bpmnModeler from 'workflow-bpmn-modeler'

export default {
  components: {
    bpmnModeler
  },
  data() {
    return {
      xml: ``, // 后端查询到的xml
      users: [

      ],
      groups: [

      ],
      categorys: [
        { name: 'OA', id: 'oa' },
        { name: '财务', id: 'finance' }
      ],
      value: ''
    }
  },
  created() {
    if (this.$route.query.xml != undefined && this.$route.query.xml != '') {
      this.xml = this.$route.query.xml
    }
    this.saveForm()
    this.listGroup()
  },
  methods: {
    getModelDetail() {
      // 发送请求，获取xml
      // this.xml = response.xml
    },
    //  人员选择   接口
    saveForm() {
      this.$ask.users().then(res => {
        if (res.code === 200) {
          const data = []
          for (let i = 0; i < res.result.length; i++) {
            data.push({ id: res.result[i].id, name: res.result[i].firstName })
          }
          this.users = [...this.users, ...data]
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    listGroup() {
      this.$Http.listGroup().then(res => {
        res.result.forEach((item, index) => {
          console.log(item)
          this.groups.push({
            id: item.id,
            name: item.name
          })
        })
      })
    },
    // 模板保存
    async save() {
      const processModel = this.$refs['refNode'].getProcess()
      const xml = await this.$refs['refNode'].saveXML()
      const svg = await this.$refs['refNode'].saveImg()
      this.$Http.addmodel({ processId: processModel.id, xml: xml }).then(res => {
        if (res.code == 200) this.$message({ message: res.message, type: 'success' })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .saveBtn {
    position: absolute;
    z-index: 99;
    top: 3px;
    right: 3px;
  }
</style>
